<template>
	<view class="form-area">
		<u--form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm">
			<u-form-item required label="项目达效时间:" prop="projectEfficiency.effectivenessTime">
				<view style="width: 100%;" @click="openDate">
					<u--input disabled disabledColor="#ffffff" style="pointer-events: none;" placeholder="请选择项目达效时间"
						v-model="form.projectEfficiency.effectivenessTime" suffixIcon="calendar"
						suffixIconStyle="color: #909399"></u--input>
				</view>
			</u-form-item>
			<u-form-item required label="达效情况:" prop="projectEfficiency.effectivenessStatus">
				<u--textarea :height="150" v-model="form.projectEfficiency.effectivenessStatus" maxlength="500" count
					placeholder="请输入达效情况"></u--textarea>
			</u-form-item>
			<u-form-item required label="达效材料:" prop="projectEfficiency.effectivenessMaterialsArr">
				<filePicker :fileExtname='["pdf", "png", "jpg", "zip", "rar", "doc", "docx", "xls", "xlsx"]'
					v-model="form.projectEfficiency.effectivenessMaterialsArr"
					@select="selectFile($event,'effectivenessMaterials')"
					@delete="deleteFile($event,'effectivenessMaterials')" limit="3" file-mediatype="all">
				</filePicker>
			</u-form-item>
			<u-form-item required label="现场图片:" prop="projectEfficiency.siteImagesArr">
				<filePicker :fileExtname="['bmp','jpg','png','jpeg']" v-model="form.projectEfficiency.siteImagesArr"
					@select="selectFile($event,'siteImages')" @delete="deleteFile($event,'siteImages')" limit="3"
					file-mediatype="image">
				</filePicker>
			</u-form-item>
			<u-form-item required label="视频封面:" prop="projectEfficiency.videoCoverArr">
				<filePicker :fileExtname="['bmp','jpg','png','jpeg']" v-model="form.projectEfficiency.videoCoverArr"
					@select="selectFile($event,'videoCover')" @delete="deleteFile($event,'videoCover')" limit="1"
					file-mediatype="image">
				</filePicker>
			</u-form-item>
			<u-form-item required label="视频:" prop="projectEfficiency.videoArr">
				<filePicker :fileExtname="['mp4','wmv','mkv']" v-model="form.projectEfficiency.videoArr"
					@select="selectFile($event,'video')" @delete="deleteFile($event,'video')" limit="3"
					file-mediatype="all">
				</filePicker>
			</u-form-item>
		</u--form>
		<pickDate ref="myPicker" @submit="handleSubmit" :start-year="1930" :end-year="2099"
			:time-hide="[true, true, true, false, false, false]" :time-label="['年', '月', '日']">
		</pickDate>
		<view style="padding: 40rpx 0;">
			<u-button shape='circle' class="sub-btn" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		subEdit,
		subAdd,
		getProjectInfo
	} from '@/utils/api.js'
	import pickDate from '@/components/yt-dateTimePicker/yt-dateTimePicker.vue'
	import filePicker from '@/components/uni-file-picker/uni-file-picker.vue'
	export default {
		components: {
			filePicker,
			pickDate
		},
		data() {
			return {
				form: {
					projectEfficiency: {
						"baseId": undefined,
						"effectivenessTime": undefined,
						"effectivenessStatus": undefined,
						"effectivenessMaterials": undefined,
						"siteImages": undefined,
						"videoCover": undefined,
						"video": undefined,
						"effectivenessMaterialsArr": [],
						"siteImagesArr": [],
						"videoCoverArr": [],
						"videoArr": [],
					},
				},
				rules: {
					"projectEfficiency.effectivenessTime": [{
						required: true,
						message: "项目达效时间不能为空",
						trigger: "change"
					}],
					"projectEfficiency.effectivenessStatus": [{
						required: true,
						message: "达效情况不能为空",
						trigger: "blur"
					}]
				},
				projectId: null
			}
		},
		onLoad(option) {
			this.projectId = option.id
			getProjectInfo(option.id).then(res => {
				if (res.data.projectEfficiency) {
					this.form.projectEfficiency = res.data.projectEfficiency
					this.form.projectEfficiency.effectivenessMaterialsArr = []
					if (this.form.projectEfficiency.effectivenessMaterialsUrl) {
						this.form.projectEfficiency.effectivenessMaterialsUrl.split(",").forEach((item, index) => {
							this.form.projectEfficiency.effectivenessMaterialsArr.push({
								name: '达效材料' + (index + 1),
								url: item,
								ossId: this.form.projectEfficiency.effectivenessMaterials.split(",")[index]
							})
						})
					}
					this.form.projectEfficiency.siteImagesArr = []
					if (this.form.projectEfficiency.siteImagesUrl) {
						this.form.projectEfficiency.siteImagesUrl.split(",").forEach((item, index) => {
							this.form.projectEfficiency.siteImagesArr.push({
								name: '现场图片' + (index + 1),
								url: item,
								ossId: this.form.projectEfficiency.siteImages.split(",")[index]
							})
						})
					}
					this.form.projectEfficiency.videoCoverArr = []
					if (this.form.projectEfficiency.videoCoverUrl) {
						this.form.projectEfficiency.videoCoverUrl.split(",").forEach((item, index) => {
							this.form.projectEfficiency.videoCoverArr.push({
								name: '视频封面' + (index + 1),
								url: item,
								ossId: this.form.projectEfficiency.videoCover.split(",")[index]
							})
						})
					}
					this.form.projectEfficiency.videoArr = []
					if (this.form.projectEfficiency.videoUrl) {
						this.form.projectEfficiency.videoUrl.split(",").forEach((item, index) => {
							this.form.projectEfficiency.videoArr.push({
								name: '视频' + (index + 1),
								url: item,
								ossId: this.form.projectEfficiency.video.split(",")[index]
							})
						})
					}
				}
			})
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//打开选择时间
			openDate() {
				this.$refs.myPicker.show();
			},
			//选择时间
			handleSubmit(e) {
				this.form.projectEfficiency.effectivenessTime = `${e.year}-${e.month}-${e.day}`
			},
			//选择上传
			selectFile(e, name) {
				uni.uploadFile({
					url: getApp().globalData.fileUrl, //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync('access_token'),
						"clientid": "e5cd7e4891bf95d1d19206ce24a7b32e"
					},
					success: (uploadFileRes) => {
						this.form.projectEfficiency[name + 'Arr'].push({
							name: JSON.parse(uploadFileRes.data).data.fileName,
							url: JSON.parse(uploadFileRes.data).data.url,
							ossId: JSON.parse(uploadFileRes.data).data.ossId
						})
						this.form.projectEfficiency[name] = this.form.projectEfficiency[name + 'Arr'].map((
							elem,
							index) => {
							return elem.ossId;
						}).join(",")
					},
					fail: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					}
				});
			},
			//删除上传
			deleteFile(e, name) {
				this.form.projectEfficiency[name + 'Arr'].splice(this.form.projectEfficiency[name + 'Arr'].findIndex(
					item => item
					.url == e.tempFilePath), 1);
				this.form.projectEfficiency[name] = this.form.projectEfficiency[name + 'Arr'].map((elem,
					index) => {
					return elem.ossId;
				}).join(",")
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (!this.form.projectEfficiency.effectivenessMaterials) {
						uni.showToast({
							title: '达效材料不能为空',
							icon: 'none',
							duration: 2000
						})
					} else if (!this.form.projectEfficiency.siteImages) {
						uni.showToast({
							title: '现场图片不能为空',
							icon: 'none',
							duration: 2000
						})
					} else if (!this.form.projectEfficiency.videoCover) {
						uni.showToast({
							title: '视频封面不能为空',
							icon: 'none',
							duration: 2000
						})
					} else if (!this.form.projectEfficiency.video) {
						uni.showToast({
							title: '视频不能为空',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showLoading({
							title: '提交中'
						});
						var subForm = {
							projectEfficiency: this.form.projectEfficiency
						}
						if (this.form.projectEfficiency.baseId) {
							subEdit(subForm).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else {
							subAdd(this.projectId, subForm).then(res => {
								if (res.code == 200) {
									uni.hideLoading()
									uni.showToast({
										title: '提交成功！',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}
					}
				}).catch(errors => {
					console.log('errors: ', errors);
					uni.$u.toast('请完善必填项！')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-area {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx 30rpx 30rpx;
	}
</style>